<template>
  <div class="User">
    <el-tree
      :data="menus"
      show-checkbox
      node-key="name"
      ref="tree"
      :props="defaultProps">
    </el-tree>
    <el-button @click="getCheckedNodes" type="primary" size="small">获取选中的菜单节点</el-button>
  </div>
</template>
<script>
export default{
  name:'User',
  data(){
    return{
       menus:[],
       defaultProps:{
         label:'name',
         children:'children'
       }
    }
  },
  created(){
     this.menus = [...this.$router.options.routes]
     console.log('routes',this.$router.options.routes);
     // 权限管理和动态路由的思路
     // 根据不同用户登录上来  返回对应的路由权限菜单
     // 一般可以通过树形组件 达到控制权限的精准控制 根据不同的用户 勾选不同的菜单权限 将菜单数据提交给后端进行保存
     // 后端保存后 在用户进行登录的时候 就会查询该用户所拥有的菜单数据 最终进行动态展示
     // 动态添加路由方法  router.addRoutes(vue-router3.x版本的方法) 新的版本用 addRoute方法进行动态路由添加
  },
  methods:{
    getCheckedNodes(){
        const checkedArr = this.$refs.tree.getCheckedNodes()
        console.log('checkedArr',checkedArr);
    }
  }
}
</script>

<style lang="scss" scoped>
.User{


}

</style>